<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = "demo">
        姓：<input type="text" placeholder="First Name" v-model="firstName"><br/>
        名：<input type="text" placeholder="Last Name" v-model="lastName"><br/>
        姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br/>
        姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br/>
        姓名3（单向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br/>

        <p>{{fullName1}}</p>
        <p>{{fullName2}}</p>
        <p>{{fullName3}}</p>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#demo',
            data:{
                firstName: 'A',
                lastName: 'B',
//                fullName1:'A B '
        },
            computed:{
                //什么时候执行： 初始化显示/相关的data属性数据发生改变
                fullName1(){
                    console.log("fullName1()")
                    return this.firstName +  ' ' + this.lastName
                }
            },
            fullName3:{
                //1.你定义的 ， 2.你没有调 ， 3. 但最终它执行了
                //2.什么时候调用？， 2 .用来干什么的？
                //回调函数 计算并返回当前属性的值
                get(){
                    return this.firstName + ' ' + this.lastName
                },
                //回调函数，当属性值发生改变时回调，更新相关的属性数据
                set(value){  //value就是fullName3的最新属性值
                    const names = value.split('')
                    this.firstName = names[0],
                    this.lastName = names[1]
                }

            },
            watch:{ //配置监视
                firstName:function (value) {
                    console.log(this)
                    this.fullName1 = value + ' ' + this.lastName
                }
            }
        })

        vm.$watch('lastName',function(value){
            this.fullName2 = this.firstName + ' ' + value
        })
    </script>
</body>
</html>